import classNames from "classnames";
import React from "react";
import { createUseStyles } from "react-jss";
import { Searchfor, Checked } from "@ct0/icons";
import { isUndefined } from "@ct0/functions";

const useStyles = createUseStyles({
  select: {
    padding: "4px 0",
  },
  search: {
    position: "relative",
    margin: "6px 12px",
  },
  searchInput: {
    height: "24px",
    lineHeight: "24px",
    border: "rgb(217, 217, 217) solid 1px",
    borderRadius: "4px",
    color: "rgb(51, 51, 51) !important",
    display: "block",
    fontSize: "12px",
    outline: "none",
    padding: "0 10px",
    width: "100%",
    boxSizing: "border-box",
    "&::placeholder": {
      color: "#c5c5c5",
    },
  },
  searchIcon: {
    position: "absolute",
    top: "0",
    right: "6px",
    height: "24px",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    cursor: "pointer",
  },
  optionsPanel: {
    maxHeight: "200px",
    overflowX: "hidden",
  },
  option: {
    padding: "10px 16px",
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    cursor: "pointer",
    maxWidth: "224px",
    "&:hover": {
      color: "#0177D7",
      background: "#F5F5F5",
    },
  },
  selected: {
    color: "#0177D7",
    background: "#F5F5F5",
  },
  optionLabel: {
    width: "calc(100% - 40px)",
    textOverflow: "ellipsis",
    whiteSpace: "nowrap",
    display: "inline-block",
    overflow: "hidden",
  },
});

export default function Select({
  options,
  value,
  multiple,
  multiValue,
  search,
  placeholder,
  onInputChange,
  onValueChange,
  onMultiValueChange,
}: {
  options: Array<{ label: string; value: string | number }>;
  value?: string | number;
  multiValue?: Array<string | number>;
  search?: boolean;
  multiple?: boolean;
  placeholder?: string;
  onValueChange?: (value?: string | number) => void;
  onMultiValueChange?: (value?: Array<string | number>) => void;
  onInputChange?: (text: string) => void;
}) {
  const classes = useStyles();
  const handler = (v: string | number) => {
    if (multiple) {
      const newV = isUndefined(multiValue)
        ? [v]
        : multiValue.includes(v)
        ? multiValue.filter((i) => i !== v)
        : multiValue.concat(v);
      onMultiValueChange?.(newV.length == 0 ? undefined : newV);
    } else {
      onValueChange?.(value == v ? undefined : v);
    }
  };
  return (
    <div className={classes.select}>
      {search && (
        <div className={classes.search}>
          <input
            type="text"
            className={classes.searchInput}
            placeholder={placeholder}
            onChange={(e) => onInputChange?.(e.target.value)}
          />
          <span className={classes.searchIcon}>
            <Searchfor />
          </span>
        </div>
      )}
      <div className={classes.optionsPanel}>
        {options.map((i) => {
          const checked = multiple
            ? multiValue?.includes(i.value)
            : value == i.value;
          return (
            <div
              key={i.value}
              className={classNames(
                classes.option,
                checked && classes.selected
              )}
              title={i.label}
              onClick={() => handler(i.value)}
            >
              <span className={classes.optionLabel}>{i.label}</span>
              {checked && <Checked />}
            </div>
          );
        })}
      </div>
    </div>
  );
}
